<template>
  <a-card :bordered="false" :class="{'abcdefg':true}">
    <div class="no-print" style="text-align: right">
      <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
    </div>
    <section id="printContent" ref="print" class="abcdefg">
      <div style="text-align: center">
        <p style="font-size: 24px;font-weight: 800">打印测试表单</p>
      </div>
      <!--签字-->
      <a-col :md="24" :sm="24">
        <div class="sign" style="text-align: left;height: inherit">
          <a-col :span="24">
          <span>
            打印人员:
          </span>
            <a-input v-model="printer" style="width: 30%"/>
            <span style="margin-left: 12.5%">打印日期:</span>
            <a-input v-model="printTime" style="width: 30%"/>
          </a-col>
          <a-col :span="24">
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>打印内容:</span>
            <a-input v-model="printContent" style="width: 80%"/>
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>打印目的:</span>
            <a-input v-model="printReason" style="width: 80%"/>
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>打印图片:</span>
            <br/>
            <a-upload
                :fileList="fileList"
                action="/jsonplaceholder.typicode.com/posts/"
                listType="picture-card"
                @change="handleChange"
                @preview="handlePreview">
              <div v-if="fileList.length < 3">
                <a-icon type="plus"/>
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
            <a-modal :footer="null" :visible="previewVisible" @cancel="handleCancel">
              <img :src="previewImage" alt="example" style="width: 100%"/>
            </a-modal>
          </a-col>
        </div>
      </a-col>
    </section>
  </a-card>
  <!--</page-layout>-->
</template>
<script>
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ATextarea from 'ant-design-vue/es/input/TextArea'

export default {
  components: {
    ATextarea,
    ARow,
    ACol,
  },
  name: 'Printgzsld',
  props: {
    reBizCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      columns: [{}
      ],
      labelCol: {
        xs: {span: 24},
        sm: {span: 2},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      printer: '张三',
      printTime: '2019-02-01 12:00:00',
      printContent: '打印内容就是,做一个打印测试',
      printReason: '做一个打印测试',
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: '-1',
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
        {
          uid: '-2',
          name: 'pic1.png',
          status: 'done',
          url: 'https://www.gizbot.com/img/2016/11/whatsapp-error-lead-image-08-1478607387.jpg',
        }
      ],
      url: {
        loadApplicant: "/sps/register/loadApplicants",
        loadRegisterFiles: "/sps/register/getRegisterFilesConfig",
      }
    }
  },
  created() {
    this.getDate();
  },
  methods: {
    loadData() {

    },
    getDate() {
      // 当前时间
    },
    handleCancel() {
      this.previewVisible = false
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({fileList}) {
      this.fileList = fileList
    }
  }
}
</script>
<style scoped>
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
  color: #000000 !important;
  -webkit-tap-highlight-color: #000000 !important;
}

/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

.abcdefg .ant-card-body {
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 1%;
  border: 0px solid black;
  min-width: 800px;
  color: #000000 !important;
}

.explain {
  text-align: left;
  margin-left: 50px;
  color: #000000 !important;
}

.explain .ant-input, .sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}

.explain div {
  margin-bottom: 10px;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>